<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>UIkit</title>
        <link rel="shortcut icon" href="docs/images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="docs/images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="docs/css/uikit.docs.min.css">
        <link rel="stylesheet" href="docs/css/docs.css">
        <link rel="stylesheet" href="vendor/highlight/highlight.css">
        <script src="vendor/jquery.js"></script>
        <script src="docs/js/uikit.min.js"></script>
        <script src="vendor/highlight/highlight.js"></script>
        <script src="docs/js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="index.html"><img class="uk-margin uk-margin-remove" src="docs/images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="docs/documentation_get-started.html">Get Started</a></li>
                    <li><a href="docs/core.html">Core</a></li>
                    <li><a href="docs/components.html">Components</a></li>
                    <li><a href="docs/customizer.html">Customizer</a></li>
                    <li><a href="showcase/index.html">Showcase</a></li>
                    <li><a href="docs/tutorials.html">Tutorials</a></li>
                    <li><a href="docs/uikit3.html">UIkit 3</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="docs/images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-section tm-section-color-1 tm-section-colored">
            <div class="uk-container uk-container-center uk-text-center">

                <img class="tm-logo" src="docs/images/logo_uikit_large.svg" width="281" height="217" title="UIkit" alt="UIkit">

                <p class="uk-text-large">A lightweight and modular front-end framework<br class="uk-hidden-small"> for developing fast and powerful web interfaces.</p>

                <a class="uk-button tm-button-download" data-uikit-download>Download UIkit</a>

                <ul class="tm-subnav uk-subnav uk-flex-center">
                    <li><a href="https://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="docs/documentation_get-started.html">Get Started</a></li>
                    <li data-uikit-version></li>
                </ul>

                <ul class="tm-subnav uk-subnav uk-flex-center">
                    <li><a href="https://github.com/uikit/uikit/stargazers"><i class="uk-icon-star"></i> <span data-uikit-stargazers>7292</span> Stargazers</a></li>
                    <li><a href="https://github.com/uikit/uikit/network"><i class="uk-icon-code-fork"></i> <span data-uikit-forks>1409</span> Forks</a></li>
                    <li><a href="https://twitter.com/getuikit"><i class="uk-icon-twitter"></i> @getuikit</a></li>
                    <li><a href="https://gitter.im/uikit/uikit"><i class="uk-icon-comments-o"></i> Community</a></li>
                </ul>

            </div>
        </div>

        <div class="tm-section tm-section-color-2 tm-section-colored">
            <div class="uk-container uk-container-center uk-text-center">

                <h1 class="uk-heading-large">Features</h1>

                <p class="uk-text-large">UIkit gives you a comprehensive collection of HTML, CSS, and JS components<br class="uk-hidden-small"> which is simple to use, easy to customize and extendable.</p>

                <div class="uk-grid" data-uk-grid-margin>

                    <div class="uk-width-medium-1-4">
                        <div class="uk-panel">
                            <img class="tm-image-pull" src="docs/images/icon_less.svg" width="200" height="140" alt="LESS">
                            <h2 class="uk-margin-top-remove">LESS</h2>
                            <p>UIkit is developed in <a href="http://lesscss.org">LESS</a> &amp; <a href="http://sass-lang.com">SASS </a> to write well-structured, extendable code which is easy to maintain.</p>
                        </div>
                    </div>

                    <div class="uk-width-medium-1-4">
                        <div class="uk-panel">
                            <img class="tm-image-pull" src="docs/images/icon_components.svg" width="200" height="140" alt="Components">
                            <h2 class="uk-margin-top-remove">Components</h2>
                            <p>A collection of small, responsive components using consistent and conflict-free naming conventions.</p>
                        </div>
                    </div>

                    <div class="uk-width-medium-1-4">
                        <div class="uk-panel">
                            <img class="tm-image-pull" src="docs/images/icon_themes.svg" width="200" height="140" alt="Themes">
                            <h2 class="uk-margin-top-remove">Customizer</h2>
                            <p>UIkit's very basic style can be extended with themes and is easy to customize to create your own look.</p>
                        </div>
                    </div>

                    <div class="uk-width-medium-1-4">
                        <div class="uk-panel">
                            <img class="tm-image-pull" src="docs/images/icon_responsive.svg" width="200" height="140" alt="Responsive">
                            <h2 class="uk-margin-top-remove">Responsive</h2>
                            <p>With the mobile-first approach UIkit provides a consistent experience from phones and tablets to desktops.</p>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <div class="tm-section tm-section-color-white">
            <div class="uk-container uk-container-center uk-text-center">

                <h1 class="tm-margin-large-bottom"><strong>Get involved.</strong> Become a part of the UIkit community.</h1>

                <div class="uk-grid tm-grid-margin-large" data-uk-grid-match="{target:'.uk-panel'}" data-uk-grid-margin>

                    <div class="uk-width-medium-1-3">
                        <a class="uk-panel tm-panel-link" href="https://twitter.com/getuikit">
                            <div class="tm-icon"><i class="uk-icon-twitter uk-icon-large"></i></div>
                            <h2>Twitter</h2>
                            <p>Follow us on Twitter and be the first to receive news and updates. We are open for your feedback and questions.</p>
                        </a>
                    </div>

                    <div class="uk-width-medium-1-3">
                        <a class="uk-panel tm-panel-link" href="https://github.com/uikit/uikit/issues">
                            <div class="tm-icon"><i class="uk-icon-github-alt uk-icon-large"></i></div>
                            <h2>Contribute on GitHub</h2>
                            <p>You want to take part in the development? Fork UIkit on GitHub and send us a pull request. To report a bug, file a new issue.</p>
                        </a>
                    </div>

                    <div class="uk-width-medium-1-3">
                        <a class="uk-panel tm-panel-link" href="https://gitter.im/uikit/uikit">
                            <div class="tm-icon"><i class="uk-icon-comments-o uk-icon-large"></i></div>
                            <h2>UIkit Community</h2>
                            <p>If you're interested in discussing, participating and helping each other, the UIkit community is the place to be.</p>
                        </a>
                    </div>

                </div>

            </div>
        </div>

        <div class="tm-section tm-section-color-2 tm-section-colored">
            <div class="uk-container uk-container-center uk-text-center">

                <h1 class="uk-heading-large uk-margin-bottom-remove">Open Source</h1>

                <p class="uk-text-large">UIkit is an open source framework to make the web look good.<br class="uk-hidden-small"> Create your own styles and discover the unlimited use of UIkit.</p>

                <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

                    <div class="uk-width-1-1 uk-width-medium-1-3">
                        <div class="uk-panel">
                            <h2>MIT License</h2>
                            <p>UIkit is absolutely free of charge and you can use, copy, merge, publish and distribute the framework without any limitations.</p>
                        </div>
                    </div>

                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <h2>Our Heroes</h2>
                            <p>A big thanks to LESS, jQuery, normalize.css and FontAwesome. UIkit wouldn't be possible without these awesome open source projects.</p>
                        </div>
                    </div>

                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <h2>Active Development</h2>
                            <p>UIkit is built by <a href="http://www.yootheme.com">YOOtheme</a>, using our extensive experience in creating Joomla and WordPress themes, to power the <a href="http://www.yootheme.com/themes/warp-framework">Warp theme framework</a>.</p>
                        </div>
                    </div>

                 </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="https://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="https://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="https://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br class="uk-hidden-small">Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="index.html"><img src="docs/images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{ multiple: true }">
                    <li class="uk-parent"><a href="#">Documentation</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/documentation_get-started.html">Get started</a></li>
                            <li><a href="docs/documentation_how-to-customize.html">How to customize</a></li>
                            <li><a href="docs/documentation_layouts.html">Layout examples</a></li>
                            <li><a href="docs/core.html">Core</a></li>
                            <li><a href="docs/components.html">Components</a></li>
                            <li><a href="docs/documentation_project-structure.html">Project structure</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass files</a></li>
                            <li><a href="docs/documentation_create-a-theme.html">Create a theme</a></li>
                            <li><a href="docs/documentation_create-a-style.html">Create a style</a></li>
                            <li><a href="docs/documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="docs/documentation_javascript.html">Javascript</a></li>
                            <li><a href="docs/documentation_custom-prefix.html">Custom prefix</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> Defaults</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/base.html">Base</a></li>
                            <li><a href="docs/print.html">Print</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/grid.html">Grid</a></li>
                            <li><a href="docs/panel.html">Panel</a></li>
                            <li><a href="docs/block.html">Block</a></li>
                            <li><a href="docs/article.html">Article</a></li>
                            <li><a href="docs/comment.html">Comment</a></li>
                            <li><a href="docs/utility.html">Utility</a></li>
                            <li><a href="docs/flex.html">Flex</a></li>
                            <li><a href="docs/cover.html">Cover</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/nav.html">Nav</a></li>
                            <li><a href="docs/navbar.html">Navbar</a></li>
                            <li><a href="docs/subnav.html">Subnav</a></li>
                            <li><a href="docs/breadcrumb.html">Breadcrumb</a></li>
                            <li><a href="docs/pagination.html">Pagination</a></li>
                            <li><a href="docs/tab.html">Tab</a></li>
                            <li><a href="docs/thumbnav.html">Thumbnav</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> Elements</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/list.html">List</a></li>
                            <li><a href="docs/description-list.html">Description list</a></li>
                            <li><a href="docs/table.html">Table</a></li>
                            <li><a href="docs/form.html">Form</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/button.html">Button</a></li>
                            <li><a href="docs/icon.html">Icon</a></li>
                            <li><a href="docs/close.html">Close</a></li>
                            <li><a href="docs/badge.html">Badge</a></li>
                            <li><a href="docs/alert.html">Alert</a></li>
                            <li><a href="docs/thumbnail.html">Thumbnail</a></li>
                            <li><a href="docs/overlay.html">Overlay</a></li>
                            <li><a href="docs/text.html">Text</a></li>
                            <li><a href="docs/column.html">Column</a></li>
                            <li><a href="docs/animation.html">Animation</a></li>
                            <li><a href="docs/contrast.html">Contrast</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/dropdown.html">Dropdown</a></li>
                            <li><a href="docs/modal.html">Modal</a></li>
                            <li><a href="docs/offcanvas.html">Off-canvas</a></li>
                            <li><a href="docs/switcher.html">Switcher</a></li>
                            <li><a href="docs/toggle.html">Toggle</a></li>
                            <li><a href="docs/scrollspy.html">Scrollspy</a></li>
                            <li><a href="docs/smooth-scroll.html">Smooth scroll</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Components</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/grid-js.html">Dynamic Grid</a></li>
                            <li><a href="docs/grid-parallax.html">Parallax Grid</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/dotnav.html">Dotnav</a></li>
                            <li><a href="docs/slidenav.html">Slidenav</a></li>
                            <li><a href="docs/pagination-js.html">Dynamic Pagination</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/form-advanced.html">Form advanced</a></li>
                            <li><a href="docs/form-file.html">Form file</a></li>
                            <li><a href="docs/form-password.html">Form password</a></li>
                            <li><a href="docs/form-select.html">Form select</a></li>
                            <li><a href="docs/placeholder.html">Placeholder</a></li>
                            <li><a href="docs/progress.html">Progress</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="docs/lightbox.html">Lightbox</a></li>
                            <li><a href="docs/autocomplete.html">Autocomplete</a></li>
                            <li><a href="docs/datepicker.html">Datepicker</a></li>
                            <li><a href="docs/htmleditor.html">HTML editor</a></li>
                            <li><a href="docs/slider.html">Slider</a></li>
                            <li><a href="docs/slideset.html">Slideset</a></li>
                            <li><a href="docs/slideshow.html">Slideshow</a></li>
                            <li><a href="docs/parallax.html">Parallax</a></li>
                            <li><a href="docs/accordion.html">Accordion</a></li>
                            <li><a href="docs/notify.html">Notify</a></li>
                            <li><a href="docs/search.html">Search</a></li>
                            <li><a href="docs/nestable.html">Nestable</a></li>
                            <li><a href="docs/sortable.html">Sortable</a></li>
                            <li><a href="docs/sticky.html">Sticky</a></li>
                            <li><a href="docs/timepicker.html">Timepicker</a></li>
                            <li><a href="docs/tooltip.html">Tooltip</a></li>
                            <li><a href="docs/upload.html">Upload</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="showcase/index.html">Showcase</a></li>
                    <li><a href="docs/tutorials.html">Tutorials</a></li>
                    <li><a href="docs/uikit3.html">UIkit 3</a></li>
                </ul>

            </div>

        </div>
        <script>

            $.ajax({
                dataType : "jsonp",
                url      : "https://api.github.com/repos/uikit/uikit?callback=ukghapi&nocache="+Math.random(),
                success  : function(data){

                    if(!data) return;

                    if(data.data.watchers){
                        $("[data-uikit-stargazers]").html(data.data.watchers);
                    }

                    if(data.data.forks){
                        $("[data-uikit-forks]").html(data.data.forks);
                    }
                }
            });
        </script>
    </body>
</html>
